<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <link rel="stylesheet" href="../assets/css/index.css"/>
</head>
<body>
<h1>v-for</h1>
<hr>
<div id="app">
    <ul>
        <li v-for="stu1 in student">{{stu1}}</li>
    </ul>
    <ul>
        <li v-for="stu in devstudent">{{stu}}</li>
    </ul>
    <hr>
    <ul>
        <li v-for="(bbb,index) in devst">{{index}} {{bbb.name}} - {{bbb.age}}</li>
    </ul>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            student: [45, 23, 67, 4, 78, 12, 64, 68],
            st: [
                {name: 'wos', age: '35'},
                {name: 'wos1', age: '30'},
                {name: 'wos2', age: '29'}
            ]
        },
        computed: {
            //编程的不是初始赋值的，不能用student这个名字，以保持原始数据安全
            devstudent: function () {
                return this.student.sort(sortNumber)
            },
            devst: function () {
                return sortByKey(this.st, 'age').reverse()
            }
        }
    });

    function sortByKey(array, key) {
        return array.sort(function (a, b) {
            let x = a[key];
            let y = b[key];
            return ((x < y) ? -1 : ((x > y) ? 1 : 0));
        });
    }

    function sortNumber(a, b) {
        return a - b
    }
</script>
</body>
</html>